// // 父传子;
// import React, { Component } from "react";
// import PropTypes from "prop-types";
// class Child extends Component {
//   constructor(props) {
//     super(props);
//   }
//   render() {
//     // 子组件在this.props中使用传来的值
//     return (
//       <div>
//         <h2>接收父组件传来的值：{this.props.name + "-" + this.props.age}</h2>
//         <ul>
//           {this.props.names.map((item, index) => (
//             <li key={index}>{item}</li>
//           ))}
//         </ul>
//       </div>
//     );
//   }
// }

// // 定义传入数据类型
// Child.propTypes = {
//   name: PropTypes.string, // 控制类型
//   age: PropTypes.number.isRequired, // 控制类型，并要求必须传入
//   names: PropTypes.array,
// };

// // 定义传入数据默认值
// Child.defaultProps = {
//   name: "fff",
//   age: 20,
//   names: [1, 2, 3],
// };

// export default class Ccpn extends Component {
//   constructor(props) {
//     super(props);
//     this.state = {
//       age: 20,
//       names: ["abc", "def", "ghi"],
//     };
//   }
//   render() {
//     return (
//       <div>
//         <h2>这里是父组件</h2>
//         {/* 属性=值 传入子组件 */}
//         <Child name="fsy" age={this.state.age} names={this.state.names} />
//       </div>
//     );
//   }
// }

import React, { Component } from "react";

class Child extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    // 子组件在this.props中使用传来的值
    return (
      <div>
        <button onClick={() => this.props.setMessage("子组件传来数据")}>
          子组件传值
        </button>
      </div>
    );
  }
}
export default class Ccpn extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: "abc",
    };
  }
  render() {
    return (
      <div>
        <h2>这里是父组件</h2>
        <Child setMessage={(msg) => this.handleSetMessage(msg)} />
        <h3>父组件接收到的值：{this.state.message}</h3>
      </div>
    );
  }

  handleSetMessage(msg) {
    this.setState({
      message: msg,
    });
  }
}
